<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import CheckForAgreement from './check-for-agreement.vue';
import InputPhoneNumber from './input-phone-number.vue';
import InputVerificationCode from './input-verification-code.vue';
import SwitchModeButton from './switch-mode-button.vue';
import { computed } from 'vue';
import { isWechat } from '@/utils/platform';

defineEmits(['login', 'switch']);

const { t } = useLocale();

const text = computed(() => {
  if (isWechat()) {
    return t('LoginUsingWechat');
  }
  return t('LoginUsingEmail');
});
</script>

<template>
  <InputPhoneNumber />
  <InputVerificationCode />
  <CheckForAgreement custom-class="mb-7" />
  <uv-button
    :custom-style="{
      width: '630rpx',
      height: '100rpx',
      backgroundColor: ' #269c74',
      color: '#fff'
    }"
    shape="circle"
    @click="$emit('login')"
  >
    {{ t('LLKey_login') }}
  </uv-button>
  <SwitchModeButton :text="text" @click="$emit('switch')" />
</template>
